/**
 *  @file       login.scss
 *  @brief      reset css styles
 *
 *
 *  @author     liumoran@outlook.com
 *  @version    1.0
 *  @date       2019
*/

/*---------------------------*/
/*      define Variable      */
/*---------------------------*/
$theme_color: #45a5df;
$gradient_top_right: #2dc1de;
$gradient_bot_left: #7278e2;
$btn_color: #ffffff;
$btn_text:#4fa9e1;
$text_color: white;

$ipt_area_height: 50px;
// $fs_50: calc( $ipt_area_height/2 );

@function fs40fs($px) {
    @return ( $px / 70 * 40);
}
@function fs35fs($px) {
    @return ( $px * 35 / 70);
}





/*------------------*/
/*      style       */
/*------------------*/
@mixin wrap_ctr {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*------------------*/
/*      layout      */
/*------------------*/
body{
    width: 100%;
    min-width: 1000px;
    min-height: 900px;
    background: -webkit-linear-gradient(to top right, $gradient_bot_left , $gradient_top_right);
    background: -moz-linear-gradient(to top right, $gradient_bot_left , $gradient_top_right);
    background: -o-linear-gradient(to top right, $gradient_bot_left , $gradient_top_right);
    background: -ms-linear-gradient(to top right, $gradient_bot_left , $gradient_top_right);
    background: linear-gradient(to top right, $gradient_bot_left , $gradient_top_right);

    border-bottom: 1px solid transparent;
}

.web{
    width: 1000px;
    margin: 0 auto 0 auto;
    border-top: 1px solid transparent;
    font-size: 0;

    /*      title bar       */
    .system_title_bar{
        width: inherit;
        height: 150px;
        background-color: rgba($color: #fff, $alpha: 0.1);
        border-radius: 0px 0px 25px 25px;
        text-align: center;
        overflow: hidden;
        z-index: 100;

        p{
            width: inherit;
            font-size: 50px;
            color: white;
            line-height: 150px;
            letter-spacing: 20px;
            user-select: none;
        }
    }
 
    /*      user input      */
    .user_input{
        width: 800px;
        // height: 120px;
        margin: 50px auto;
        .usr_ipt_area{
            margin-bottom: 30px;
            // padding-left: 240px;
            // padding-right: 240px;
            width: inherit;
            height: $ipt_area_height;
            // border-radius: 10px;
            // background-color: rgba($color: #fff, $alpha: 0.1);
            border: 1px solid transparent;

            .ipt_item{
                width: 200px;
                height: $ipt_area_height;
                background-color: rgba($color: #fff, $alpha: 0.1);
                border-radius: 10px;
                border: 1px solid transparent;
                
                p{
                    font-size: fs40fs($ipt_area_height);  
                    line-height: $ipt_area_height;
                    text-align: center;
                    color: $text_color;
                    user-select: none;
                    @include wrap_ctr();
                }
            }
            .forget{
                background-color: transparent;
            }
            
            .ipt_info{
                width: 300px;
                height: $ipt_area_height;
                background-color: transparent;
                overflow: hidden;
                border-radius: 10px;
                border: 1px solid white;

                &:hover{
                    border-color: white;
                    background-color: rgba($color: #fff, $alpha: 0.15);
                }

                input{
                    width: 430px;
                    height: inherit;
                    /*  input style     */
                    color: $text_color;
                    font-size: fs35fs($ipt_area_height);
                    text-indent: 1em;
                }
            }
            .forget_password{
                margin-left: 30px;
                width: 170px;
            }
            .forget_password:hover{
                background-color: #fff;
                p{
                    color: $theme_color;
                }
            } 
        }
    }
    /*      user submit     */
    .user_submit{
        width: 800px;
        margin: 50px auto;
        border-bottom: 1px solid transparent;
        .sub_area{
            margin: 0 auto;
            width: inherit;
            height: $ipt_area_height;

            .btn_area{
                width: 325px;
                height: $ipt_area_height;
                border-radius: 20px;
                background-color: rgba($color: white, $alpha: 0.8);
                text-align: center;
                transition: all 200ms;
                cursor: pointer;

                input, a>p{
                    font-size: fs40fs($ipt_area_height);
                    line-height: $ipt_area_height;
                    color: $btn_text;
                    user-select: none;
                    @include wrap_ctr();
                }

                &:hover{
                    background-color: $btn_color;
                }
            }

        }

    }
}